<template>
  <quick-search-layout>
    <template #condition>
      <el-form
        :model="condition"
        ref="form"
        inline
        size="small"
        label-position="top"
        label-width="0"
      >
        <el-form-item prop="name">
          <el-input v-model="condition.name" placeholder="员工姓名" clearable>
          </el-input>
        </el-form-item>
        <el-form-item prop="position">
          <el-input
            v-model="condition.position"
            placeholder="员工职位"
            clearable
          >
          </el-input>
        </el-form-item>

        <el-button
          size="small"
          explain
          type="primary"
          icon="el-icon-search"
          @click="getEmployees"
          >搜索</el-button
        >
        <el-button size="small" explain icon="el-icon-refresh" @click="reset"
          >重置</el-button
        >
      </el-form>
    </template>

    <slot slot="list" />

    <template #pagination>
      <el-pagination
        @size-change="getEmployees"
        @current-change="getEmployees"
        :current-page.sync="condition.page_index"
        :page-sizes="[5, 8, 10, 20, 30, 40, 50, 100, 200]"
        :page-size.sync="condition.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </template>
  </quick-search-layout>
</template>

<script>
import _api from "../../common/api/employee";

export default {
  data() {
    return {
      total: 0,
      condition: {
        id: "",
        name: "",
        position: "",
        page_index: 1,
        page_size: 10,
      },
    };
  },
  methods: {
    async getEmployees() {
      try {
        const result = await _api.getListAsync(this.condition);
        this.total = +result.total;
        this.$emit("onSearch", result.data);
      } catch (error) {}
    },
    async reset() {
      this.$refs.form.resetFields();
      await this.getEmployees();
    },
  },
  mounted() {
    this.getEmployees();
  },
};
</script>

<style lang="scss" scoped>
</style>